<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true" style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view class="h30"></view>
		<view class="blocks">
				<view style="padding: 20rpx 40rpx;color: #333333;">
					<view class="flex-SB">
						<view>今日步数总计</view>
						<!-- <view style="font-size: 20rpx;color: #aaa;">步数统计图</view> -->
						<view style="font-size: 66rpx;">{{pedometer}}<text style="font-size: 24rpx;margin-left: 6rpx;">步</text></view>
					</view>
					<!-- <view style="font-size: 66rpx;">{{pedometer}}<text style="font-size: 24rpx;margin-left: 6rpx;">步</text></view> -->
					<view style="font-size: 20rpx;color: #aaa;">{{lastTime}}</view>
				</view>
				<view style="width: 686rpx;height: 220px;">
					<l-echart ref="tiredChartDetails"></l-echart>
				</view>
		</view>
		<view class="h30"></view>
		<view class="blocks flex-SB" style="background-color: transparent;padding-bottom: 30rpx;">
			<view class="c-box">
				<view class="c-head-title">步数最多的一天</view>
				<view class="c-block">
					<image class="c-img" src="@/static/images/pode.png"></image>
					<view class="c-head-box">
						<view class="c-head-pode">{{lkMax.pedometer}}</view>
						<view class="c-head-date">{{lkMax.time}}</view>
					</view>
				</view>
			</view>
			<view class="c-box">
				<view class="c-head-title">步数最少的一天</view>
				<view class="c-block">
					<image class="c-img" src="@/static/images/pode.png"></image>
					<view class="c-head-box">
						<view class="c-head-pode">{{lkMin.pedometer}}</view>
						<view class="c-head-date">{{lkMin.time}}</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="showMap">
			<view class="h30">{{showMap}}</view>
			<view class="blocks" style="overflow: hidden;position: relative;">
				<cover-view v-show="lonctionTime" style="width: 320rpx;height: 50rpx;background: rgba(226, 224, 224, 0.7);position: absolute;top: 0;z-index: 9;line-height: 50rpx;text-align: center;font-size: 14px;">
					{{lonctionTime}}
				</cover-view>
				<map id="myMap" @tap="getmap" class="blocks" style="width: 686rpx; height: 700rpx;border-radius: 20rpx;" scale="10" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
		</block>

		<view class="h30"></view>
		<view class="blocks">
			<view style="font-size: 30rpx;font-weight: bolder;padding: 30rpx;">
				步数说明
			</view>
			<view style="color: #A6A6A6;font-size: 28rpx;padding: 0 30rpx 30rpx;    line-height: 1.8;letter-spacing: 2px;">
				<view>步数就是人走路时脚落地的次数。例如，从一栋楼走到另一栋楼，每走一步，步数就增加一点。它可以简单理解为衡量走了多少路的一个指标。</view>
			</view>
		</view>
<!-- 		<view class="h30"></view>
		<view class="blocks flex-SB" style="height: 120rpx;background: #fff;line-height: 120rpx;">
			<view class="itme-txt">今日步数总计</view>
			<view class="itme-txt">{{pedometer}}步</view>
		</view> -->
		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member'])
		},
		components: {
			LEchart,
		},
		data() {
			return {
				showMap:false,
				lkMin:{
					pedometer:'-',
					time:'-'
				},
				lkMax:{
					pedometer:'-',
					time:'-'
				},
				lastTime: '',
				pedometer: '-',
				showCal: false,
				dateTime: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				minDate: `${year}-${month}-${date-100}`,
				nowData: null,
				pedoMax:100,
				latitude: 39.909,
				longitude: 113.39742,
				lonctionTime:'',
				covers: []
			};
		},
		onLoad(opt) {
			let {
				dateTime
			} = opt;
			this.dateTime = dateTime;
			// this.dateTime = "2025-01-11";
			this.initPage(this.dateTime);
		},
		methods: {
			getmap(e) {
				if (this.type) return;
			},
			commitCheck(e) {
				// console.log(e, 565);
				uni.$emit('commitCheck', e);
				uni.navigateBack({
					delta: 1
				});
			},
			initPage(dateTime) {
				if(this.$refs.tiredChartDetails){
					this.$refs.tiredChartDetails.dispose()
				}
				this.pedometer = '-';
				this.covers = [];
				this.lkMin = {
					pedometer:'-',
					time:'-'
				};
				this.lkMax = {
					pedometer:'-',
					time:'-'
				};
				if(!this.member.imei){
					return this.$toast("请登录后查看您的数据！");
				};
				uni.$u.http.post('/client/watch_health_data/type', {
					imei: this.member.imei,
					type:4,
					date:dateTime
				}).then(res => {
					if(res.status == 500){
						return this.$toast(res.msg||'获取数据失败！');
					}
					if(res.status == 200){
						let initdata = [];
						let date = [];
						let data = res.data.lkDate7;
						this.lkMax = res.data.lkMax;
						this.lkMin = res.data.lkMin;
						if (data.length) {
							this.lastTime = data[0].time;
						}
						if (res.data.lk) {
							this.pedometer = res.data.lk.pedometer;
						}
						let maxsum = 0;
						for (let i in data) {
							// console.log(i);
							// initdata.push(data[i].pedometer);
							date.unshift(data[i].time.slice(5,10))
							let item = {
									value:data[i].pedometer,
									itemStyle:{
										color:'#D9D9D9'
									}
								}
							if(data[i].pedometer>=1000){
								item.itemStyle.color = '#14B3F8'
							}
							initdata.unshift(item)
						}
						// console.log(initdata);
						this.initTiredChart(initdata, date);
						
						if(res.data.location.length){
							this.showMap = true;
							this.latitude = res.data.location[0].lat;
							this.longitude = res.data.location[0].lon;
							this.lonctionTime = res.data.location[0].time;
							this.covers.push({
									id:1,
									latitude: res.data.location[0].lat,
									longitude: res.data.location[0].lon,
									iconPath:'/uni_modules/map-Point/static/point-a.png',
									width:101,
									heigh:101
								})
						}
					}

				});
			},
			datechange(e) {
				this.showCal = false;
				let dstr = e.fulldate;
				if (this.dateTime == dstr) {
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initTiredChart(data, date) {
				if (data.length == 0) {
					for (let i = 0; i < 7; i++) {
						data.push(0)
						date.push('')
					}
				}
				let option = {
					color:['#22a9e3'],
					grid: {
						top: 20,
						left: 30,
						right: 45,
						bottom: 30
					},
					xAxis: {
						data: date,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color:'#BBBBBB'
						},
					},
					yAxis: {
						type: 'value',
						// min: 0,
						// max: this.pedoMax,
						position: 'right',
						axisLine: {
							show: false
						},
						axisLabel: {
							color:'#BBBBBB'
						},
					},
					series: [{
						data: data,
						type: 'bar',
						padding: 5,
						itemStyle: {
							borderRadius: [5, 5, 5, 5]
						},
						showSymbol: false,
					}]
				};
				this.$nextTick(() => {
					this.$refs.tiredChartDetails.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.c-box{
		width: 333rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.c-head-title{
		color: #777777;
		font-size: 20rpx;
		padding: 10rpx;
	}
	.c-head-pode{
		color: #333333;
		font-size: 48rpx;
		font-weight: bold;
	}
	.c-head-date{
		color: #aaaaaa;
		font-size: 20rpx;
		line-height: 28rpx;
	}
	.c-head-box{
		padding: 10rpx;
	}
	.c-img{
		width: 80rpx;
		height: 80rpx;
	}
	.c-block{
		display: flex;
		    justify-content: center;
		    align-items: center;
	}
</style>